<extend name="./Common/View/Public/base.html"/>

<block name="main">
    <div class="layui-tab layui-tab-brief" lay-filter="user">
        <ul class="layui-tab-title" id="LAY_mine">
            <li class="layui-this" lay-id="info">我的资料</li>
            <li lay-id="avatar">头像</li>
        </ul>
        <div class="layui-tab-content" style="padding: 20px 0;">
            <div class="layui-form layui-form-pane layui-tab-item layui-show">
                <form class="layui-form" method="post" action="" lay-filter="pageForm">
                    <div class="layui-form-item">
                        <label for="L_nickname" class="layui-form-label">昵称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="L_nickname" name="nickname" required=""
                                   lay-verify="required|length" minlength="1" maxlength="30" autocomplete="off"
                                   value="{$data.nickname}" class="layui-input"></div>
                        <div class="layui-form-mid layui-word-aux"></a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="L_email" class="layui-form-label">邮箱</label>
                        <div class="layui-input-inline">
                            <input type="text" id="L_email" name="email" required=""
                                   lay-verify="email" autocomplete="off"
                                   value="{$data.email}" class="layui-input"></div>
                        <div class="layui-form-mid layui-word-aux"></a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="L_mobile" class="layui-form-label">手机号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="L_mobile" name="mobile" required=""
                                   lay-verify="phone" autocomplete="off"
                                   value="{$data.mobile}" class="layui-input"></div>
                        <div class="layui-form-mid layui-word-aux"></a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn" key="set-mine" lay-filter="*" lay-submit="">确认修改</button>
                    </div>
                </form>
            </div>
            <div class="layui-form layui-form-pane layui-tab-item">
                <form class="layui-form" lay-filter="faceForm">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                        <tr>
                            <td id="preImgs"><img src="__UPLOAD__/{$data.photo}" width="200"/></td>
                        </tr>
                        <tr>
                            <td>
                                <button class="layui-btn layui-btn-normal" type="button" id="selectBtn">重新选择</button>
                                <button class="layui-btn" id="saveBtn" type="submit">保存</button>
                            </td>
                        </tr>
                    </table>
                    <input type="hidden" id="img" name="img"/>
                    <input type="hidden" id="x" name="x"/>
                    <input type="hidden" id="y" name="y"/>
                    <input type="hidden" id="w" name="w"/>
                    <input type="hidden" id="h" name="h"/>
                </form>
            </div>
        </div>
    </div>
</block>

<block name="style">
    <link rel="stylesheet" href="__PUBLIC__/jcrop/jquery.Jcrop.min.css">
</block>
<block name="script">
    <script src="__PUBLIC__/jcrop/jquery.Jcrop.min.js"></script>
    <script>
        layui.use(['form', 'layer', 'element', 'jquery', 'upload'], function () {
            layui.form.on('submit(pageForm)', function (data) {
                layui.jquery.post('', data.field,
                        function (res) {
                            if (res.error != '0') {
                                app.error(res.message);
                            } else {
                                window.location.reload(true);
                            }
                        });
                return false;
            });

            layui.form.on('submit(faceForm)', function (data) {
                if (data.field.img == '') {
                    app.error('请先选择图片!');
                    return false;
                }
                app.post('sys/user/photo', data.field, function (response) {
                    if (response.error == '0') {
                        app.success(response.message);
                        $('#preImgs').html('<img src="__UPLOAD__/' + response.data + '?' + (new Date()).getTime() + '" width="200" id="preImg"/>');
                        //window.location.reload(true);
                    } else {
                        app.error(response.message);
                    }
                });
                return false;
            });

            layui.upload.render({ //允许上传的文件后缀
                elem: '#selectBtn'
                , url: app.api + 'sys/upload/image'
                , accept: 'image' //普通文件
                , exts: 'jpg|png|jpeg|gif' //只允许上传压缩文件
                , done: function (res, index, upload) {
                    if (res.error == '0') {
                        doCrop(res.data);
                    } else {
                        app.error(res.message);
                    }
                }
                , error: function (index, upload) {
                    app.error("上传文件发生错误!");
                }
            });
            function doCrop(url) {
                $('#img').val(url);
                $('#preImgs').html('<img src="__UPLOAD__/' + url + '" width="400" id="preImg"/>');
                $('#preImg').Jcrop({
                    setSelect: [0, 0, 200, 200],
                    aspectRatio: 1,
                    minSelect: [200, 200],
                    onSelect: updateCoords,
                    trackDocument: false,
                    allowResize: false
                }, function () {
                    jcropApi = this;
                });
            }

            function updateCoords(c) {
                $('#x').val(c.x);
                $('#y').val(c.y);
                $('#w').val(c.w);
                $('#h').val(c.h);
            };
        });
    </script>
</block>